// Color variables (appears count calculates by raw css)
@color0: #ffffff; // Appears 11 times
@color1: #333333; // Appears 6 times
@color2: #323232; // Appears 5 times
@color3: #444444; // Appears 4 times
@color4: #d2d6de; // Appears 2 times

// Width variables (appears count calculates by raw css)
@width0: 300px; // Appears 3 times
@width1: 100%; // Appears 2 times
@width2: 12px; // Appears 2 times
@width3: 8px; // Appears 2 times

// Height variables (appears count calculates by raw css)
@height4: 8px; // Appears 2 times

.box {
	background: @color0;
	border-radius: 3px;
	border-top: 3px solid @color4;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	position: relative;
	width: @width1;
}
.box.box-default {
	border-top-color: @color4;
}
.box-header:before, .box-body:before, .box-footer:before, .box-header:after, .box-body:after, .box-footer:after  {
	content: " ";
	display: table;
}
.box-header {
	color: @color3;
	display: block;
	padding: 10px;
	position: relative;
	&:after {
		clear: both;
	}
}
.box-body {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding: 10px;
	&:after {
		clear: both;
	}
}
.box-footer {
	&:after {
		clear: both;
	}
}
.box-header.with-border {
	border-bottom: 1px solid #f4f4f4;
}
.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title  {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	margin: 0;
}
.box-header>.fa {
	margin-right: 5px;
}
.box-header>.glyphicon {
	margin-right: 5px;
}
.box-header>.ion {
	margin-right: 5px;
}
.content-header {
	color:@color0;
	height:73px;
	a {
		color:@color0;
		font-size:24px;
	}
}
.headerlist {
	background: @color0;
	border-radius:0;
	box-shadow:1px 1px 2px #f5f5f5;
	left: 15px;
	padding:15px;
	position: absolute;
	top: 40px;
	width: @width0;
	z-index: 880;
	li {
		border-bottom:1px solid #bebebe;
		a {
			color:#4d585e;
			font-size:14px;
		}
	}
}
.btn-group {
	.btn-link {
		color:@color0;
		margin-top:10px;
		text-decoration: none;
		&:hover {
			background:@color0;
			color:@color3;
		}
	}
	span {
		margin-left:5px;
	}
}
.box-default {
	.btn-menu {
		padding:0 7px;
	}
}
.content {
	.btn-menu {
		.btn-link {
			color:@color3;
			text-decoration: none;
			&:hover {
				background:#2e80ab;
				color:@color0;
				i.fa {
					color:@color0;
				}
			}
		}
		i.fa {
			color:@color3;
			margin-right:5px;
		}
	}
	.box-body>form {
		.form-group-wrapper {
			padding-bottom:15px;
		}
		.box-header.with-border {
			border-color:#797979;
			padding:10px 0px;
		}
		h6 {
			color:@color1;
		}
	}
}
.required-mark {
	color:red;
	cursor:pointer;
	display: inline-block;
	font-size:20px;
	height:17px;
	line-height: 22px;
	margin-right:5px;
	vertical-align:middle;
	width:@width2;
	&:hover {
		.suggest {
			display:block;
		}
	}
}
.suggest-message {
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	-webkit-border-radius:50%;
	background:#575b60;
	border-radius:50%;
	color:@color0;
	display: inline-block;
	font-size:15px;
	height:12px;
	margin-left:5px;
	padding-top:1px;
	position:relative;
	text-align:center;
	width:@width2;
	&:hover {
		.suggest {
			display:block;
		}
	}
}
.suggest {
	background:@color1;
	color:@color0;
	display:none;
	font-size:12px;
	font-weight: 400;
	left:8px;
	letter-spacing:2px;
	line-height:14px;
	padding:15px;
	position:absolute;
	text-align:left;
	top:-54px;
	width:@width0;
	z-index:1000;
	&:after {
		border-bottom:12px solid transparent;
		border-right:12px solid transparent;
		border-top:12px solid @color1;
		content:'';
		height:@height4;
		left:0;
		position:absolute;
		top:40px;
		width:@width3;
	}
}
.suggest-more {
	top:-64px;
	&:after {
		top:54px;
	}
}
.suggest-basic {
	top:18px;
	&:after {
		border-bottom:12px solid @color1;
		border-right:12px solid transparent;
		border-top:12px solid transparent;
		top:-18px;
	}
}
.form-group {
	position:relative;
}
.tips {
	color:@color2;
	display:none;
	font-size:12px;
	position:absolute;
	right:15px;
	top:33px;
	&:hover {
		.tips-content {
			display:block;
		}
	}
}
.tips-content {
	background:@color1;
	color:@color0;
	display:none;
	font-size:12px;
	letter-spacing: 2px;
	line-height:14px;
	padding:15px;
	position:absolute;
	right:0;
	top:-49px;
	width:@width0;
	z-index: 1000;
	&:after {
		border-bottom:12px solid transparent;
		border-left:12px solid transparent;
		border-top:12px solid @color1;
		bottom:-24px;
		content:'';
		height:@height4;
		position:absolute;
		right:5px;
		width:@width3;
	}
}
 {
	&::-webkit-input-placeholder {
		color:@color2;
		font-size:12px;
		font-style:italic;
	}
	&::-moz-placeholder {
		color:@color2;
		font-size:12px;
		font-style:italic;
	}
	&:-ms-input-placeholder {
		color:@color2;
		font-size:12px;
		font-style:italic;
	}
}
input {
	&:-moz-placeholder {
		color:@color2;
		font-size:12px;
		font-style:italic;
	}
}
input[type="text"] {
	&::-ms-clear {
		display:none;
	}
}
.address {
	position:relative;
}
.provice-wrapper {
	background:#cccccc;
	height:50px;
	left:0;
	position:absolute;
	top:58px;
	width:@width1;
	z-index:1000;
}
.provice-content {
	font-size:12px;
	list-style:none;
	padding:15px;
	li {
		line-height:25px;
	}
}